<template>
    <div class="asideList" :class="{ 'active': active }">
        <span class="asideListTitle">
            <slot></slot>
        </span>
        <el-button class="asideListBtn1" text type="primary" size="small" @click.stop="$emit('edit')">
            <el-icon :size="12">
                <Edit />
            </el-icon>
        </el-button>
        <span @click.stop="() => { }">
            <el-popconfirm title="是否删除该分类" confirmButtonText="确认" cancelButtonText="取消" @confirm.stop="$emit('delete')">
                <template #reference>
                    <el-button class="asideListBtn2" text type="primary" size="small">
                        <el-icon :size="12">
                            <Close />
                        </el-icon>
                    </el-button>
                </template>
            </el-popconfirm>
        </span>
    </div>
</template>
<script setup>
defineProps({
    active: {
        type: Boolean,
        default: false
    }
})

defineEmits(['edit', 'delete'])
</script>   
<style scoped lang="less">
.asideList {
    display: flex;
    padding: 10px;
    font-size: 14px;
    color: #a5a5a5;
    align-items: center;
    border-bottom: 1px solid #f4f4f4;
    cursor: pointer;

    .asideListTitle {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .asideListBtn1 {
        padding: 0 5px;
        margin-left: auto;
    }

    .asideListBtn2 {
        padding: 0 5px;
    }

    &:hover {
        background-color: rgb(230, 239, 243);
    }
}

.active {
    background-color: rgb(230, 239, 243);
}
</style>